<template>
  <a-card title="公告中心" style="width: 100%">
    <a slot="extra">
      <a-button v-if="$store.state.user.loginUser.type !== 3"
                type="primary" ghost size="small" @click="showModal('add',{})">
        发布
      </a-button>
    </a>
    <a-list
        class="demo-loadmore-list"
        :loading="loading"
        item-layout="vertical"
        size="large"
        :data-source="annoList"
    >
      <a-list-item slot="renderItem" slot-scope="item, index">
        <div slot="extra">
          <a-space>
            <a-button v-if="$store.state.user.loginUser.type !== 3"
                      type="primary" ghost size="small" @click="showModal('edit',item)">
              编辑
            </a-button>

            <a-button v-if="$store.state.user.loginUser.type !== 3"
                      type="danger" ghost size="small" @click="removeModal(item)">
              删除
            </a-button>
          </a-space>
        </div>
        <a-list-item-meta
            :description="item.user.userName + ' 发布于 ' + $moment(item.annoPublishTime).format('yyyy-MM-DD HH:mm:ss')"
        >
<!--          标题-->
          <a slot="title"> {{item.annoTitle}} </a>
          <a-avatar slot="avatar" :title="item.user.userName" :src="item.user.avatar || ''"/>
          <a-tag slot="title" class="cursor" :color="tag.rankColor" v-for="(tag,index) in item.user.rankList || []" :key="index">{{tag.rankName}} </a-tag>
        </a-list-item-meta>
        <div class="resContent">
          公告是否全局提示 : {{ item.annoIsCommond === 1 ? '是' : '否' }}<br/>
          公告内容 :<br/>
          <h3 v-for="(i,index) in item.annoContentList || []" :key="index">{{i}}</h3>
        </div>
      </a-list-item>
    </a-list>
    <!--    编辑模态框-->
    <a-modal
        :title="ModalText"
        :visible="visible"
        :confirm-loading="confirmLoading"
        okText="确认"
        okType="primary"
        cancelText="放弃"
        @ok="handleOk"
        @cancel="handleCancel"
    >
      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 16 }">
        <a-form-item label="公告主题">
          <a-input
              placeholder="请输入公告主题"
              v-decorator="['annoTitle', {
                initialValue: currentAnno.annoTitle,
                rules: [{ required: true, message: '请输入公告主题!' }] }]"
          />
        </a-form-item>

        <a-form-item label="是否全局提示">
          <a-select
              v-decorator="[
              'annoIsCommond',{
                initialValue: currentAnno.annoIsCommond,
                rules: [{ required: true, message: '是否全局提示!' }] },
        ]"
              placeholder="请选择公告是否提示"
          >
            <a-select-option :value="1">
              提示
            </a-select-option>
            <a-select-option :value="0">
              不提示
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="公告内容">
          <a-textarea
              :rows="4"
              placeholder="请输入公告内容"
              v-decorator="['annoContent', {
                initialValue: currAnnoContent,
                rules: [{ required: true, message: '请输入公告内容!' }] }]"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </a-card>
</template>

<script>
import {getAnnoList, removeAnno, updateAnno} from "@/api/sys";
import {updateRole} from "@/api/role";

export default {
  name: "annoCenter",
  data() {
    return {
      loading: true,
      annoList: [],
      // 编辑模态框是否显示
      visible: false,
      // 确认加载中
      confirmLoading: false,
      // 编辑菜单
      currentAnno:{},
      ModalText:'',
      currAnnoContent:'',
      formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'coordinated' }),
    };
  },
  mounted() {
    // 加载公告信息
    this.loadAnnoList();
  },
  methods: {
    // 加载公告信息
    async loadAnnoList() {
      this.loading = true;
      const {code, data} = await getAnnoList();
      if (code === 200) {
        this.loading = false;
        this.annoList = data;
      } else {
        this.$message.error(msg);
      }
    },
    showModal(type,data){
      this.currentAnno = data;
      if (type === 'add'){
        this.ModalText = '发布公告';
        this.currAnnoContent = '';
        this.visible = true;
      }else if(type === 'edit'){
        this.ModalText = '修改公告';
        let annoList = this.currentAnno.annoContentList;
        let content = '';
        if (annoList && annoList.length > 0){
          annoList.forEach(a => {
            content += a;
          })
          this.currAnnoContent = content;
        }
        this.visible = true;
      }
    },
    // 删除公告
    removeModal(record){
      const _this = this;
      this.$confirm({
        title: '删除公告',
        content: '您正在删除公告信息,请确认删除!',
        okText: '确认',
        okType: 'danger',
        cancelText: '放弃',
        onOk() {
          removeAnno(record.id).then(res => {
            const { code,msg } = res;
            if (code === 200){
              _this.$message.success(msg);
              _this.loadAnnoList();
            } else {
              _this.$message.error(msg);
            }
          }).catch(error => {
            console.log(error);
            _this.$message.error("操作异常");
          })
        },
        onCancel() {

        },
      });
    },

    // 点击了确定
    handleOk(e) {
      const _this = this;
      this.form.validateFields(async (err, values) => {
        if (!err) {
          _this.ModalText = '正在处理中...';
          _this.confirmLoading = true;
          let params = {...values,id:_this.currentAnno.id};
          const result = await updateAnno(params);
          const {code,msg} = result;
          if (code === 200){
            _this.$message.success(msg);
            _this.loadAnnoList()
          } else {
            _this.$message.error(msg);
          }
          setTimeout(() => {
            _this.visible = false;
            _this.confirmLoading = false;
            _this.currentAnno = {};
            _this.form.resetFields();
          }, 1000);
        }
      });
    },
    // 点击了取消
    handleCancel(e) {
      console.log('Clicked cancel button');
      this.visible = false;
    },
  }
}
</script>

<style scoped>
.demo-loadmore-list {
  min-height: 350px;
}
.resContent{
  line-height: 30px;
}
</style>
